import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "./assets/base.css";

import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";

const app = createApp(App);
app.use(Viewer, {
  defaultOptions: {
    inline: true, //自动缩放
    // backdrop:false,
    button: true, //右上角按钮
    navbar: false, //底部缩略图
    title: true, //当前图片标题
    toolbar: false, //底部工具栏
    tooltip: true, //显示缩放百分比
    movable: true, //是否可以移动
    zoomable: true, //是否可以缩放
    rotatable: false, //是否可旋转
    scalable: false, //是否可翻转
    transition: true, //使用 CSS3 过度
    fullscreen: true, //播放时是否全屏
    keyboard: false, //是否支持键盘
    // "url": "data-source",//图片地址
    ready: function (e) {
      console.log(e.type, "组件以初始化");
    },
    show: function (e) {
      console.log(e.type, "图片显示开始");
    },
    shown: function (e) {
      console.log(e.type, "图片显示结束");
    },
    hide: function (e) {
      console.log(e.type, "图片隐藏完成");
    },
    hidden: function (e) {
      console.log(e.type, "图片隐藏结束");
    },
    view: function (e) {
      console.log(e.type, "视图开始");
    },
    viewed: function (e) {
      console.log(e.type, "视图结束");
      // 索引为 1 的图片旋转20度
      if (e.detail.index === 1) {
        this.viewer.rotate(20);
      }
    },
    zoom: function (e) {
      console.log(e.type, "图片缩放开始");
    },
    zoomed: function (e) {
      console.log(e.type, "图片缩放结束");
    },
  },
});

router.beforeEach((to, from, next) => {
  //设置延时器让created先执行在进行路由跳转

  // 判断该路由是否需要登录权限
  if (to.meta.requireAuth) {
    if (localStorage.isLogin == "true") {
      next();
    }
  } else {
    next();
  }
});
app.use(router);

app.config.globalProperties.loginUserName = "1234";
app.mount("#app");
